@import 'config';
.detail-warp{
  height: 100%;
  display: flex;
  flex-direction:column;
  background-color: #fff;
  transform: translate3d(0,0,0);
  transition: all 0.2s linear;
  position: absolute;
  width: 100%;
  &.move-enter, &.move-leave-active{
    transform: translate3d(100%,0,0);
  }
  .image-header{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.7%;
    img{
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .back{
      position: absolute;
      top: px2rem(10px);
      left: px2rem(10px); 
      width: px2rem(40px);
      height: px2rem(16px);
      padding: px2rem(12px) 0;
      color: $white;
      background-color: rgba($black, .7);
      font-size: px2rem(10px);
      text-align: center;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon{
        margin-top: px2rem(-2px);
      }
    }
  }
  .btn-reserve{
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // width: 100%;
    height: px2rem(44px);
    line-height: px2rem(44px);
    font-size: px2rem(16px);
    text-align: center;
    color: $white;
    background-color: $red;
  }
}
.detail{
  flex: 1;
  height: 100%;
  // overflow: auto;
  .hd{
    background-color: $light;
    padding-bottom: px2rem(10px);
    border-bottom: 1px solid darken($light, 5%);
    .title, .extact, .tags{
      margin: px2rem(5px) px2rem(10px);
    }
    .title{
      font-size: px2rem(16px);
      height: px2rem(20px);
      line-height: px2rem(20px);
      overflow: hidden;
    }
    .extact, .price{
      display: flex;
      align-items:center;
    }
    .price{
      flex: 1;
    }
    .sale{
      font-size: px2rem(18px);
      color: $red;
      margin-right: px2rem(8px);
    }
    .del{
      color: $dark;
      font-size: px2rem(14px);
      text-decoration: line-through;
    }
    .contact{
      font-size: px2rem(12px);
      color: $dark;
    }
  }
  .tags{
    font-size: 0;
    .tags-item{
      color: $dark;
      margin-right: px2rem(8px);
    }
    .icon{
      color: $green;
      font-size: px2rem(10px);
      margin-right: px2rem(2px);
    }
    .text{
      font-size: px2rem(10px);
    }
  }
  .bd{
    margin: px2rem(5px) px2rem(10px);
    &>.title{
      font-size: px2rem(12px);
      height: px2rem(20px);
      line-height: px2rem(20px);
      overflow: hidden;
    }
    img{
      width: 100%;
      height: auto;
    }
  }

}
